<template>
  <el-card style="min-height: 80vh;">
      <div class="card-body">
        <el-row class="row">
          <el-col :span="24">
            <el-select  v-model="bjId" placeholder="请选择班级" @change="onBjChange">
              <el-option v-for="bj in bjs" :key="bj.id" :label="bj.name" :value="bj.id"></el-option>
            </el-select>
            <el-select  v-model="studentId" placeholder="请选择学生" @change="onStudentChange">
              <el-option v-for="student in stus" :key="student.id" :label="student.name" :value="student.id"></el-option>
            </el-select>
            <el-button icon="el-icon-search" type="primary"  :disabled="cxbutt" @click="onSearchClick">查询</el-button>
          </el-col>
        </el-row>
        <div class="table">
          <el-table height="76vh" :data="data" border ref="singleTable" highlight-current-row v-if="tableVisible">
            <el-table-column label="课程" prop="course.name" ></el-table-column>
            <el-table-column label="成绩">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.grade" @change="setGrade(scope.row)"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
      </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableVisible:false,
      cxbutt:true,
      bjId: '',
      studentId:'',
      bjs:[],
      stus:[],
      data:[],
    }
  },
  methods:{
    onBjChange(val){
      if(val){
        this.$ajax.post('grade/getStu',{bjId:this.bjId}).then(res=>{
          var result=res.data;
          this.stus=result;
          this.studentId='';
          this.cxbutt=true;
        })
      }else{
        this.stus=[];
      }
      this.tableVisible=false;
    },
    onStudentChange(){
      this.tableVisible=false;
      this.cxbutt=false;
    },
    onSearchClick(){
      this.$ajax.post('grade/getPersonGrade',{stuId:this.studentId}).then(res=>{
        this.data=res.data;
        this.tableVisible=true;
      })
    },
    setGrade(s){
      var id = s.id;
      var grade = s.grade;
      this.$ajax.post('grade/stuSave1',{id:id,grade:grade}).then(res=>{
        var result=res.data;
        if(result.success){
            this.$message({
              message: '保存成功',
              type: 'success'
            });
        }
      }).catch(error => {
            alert('网络连接失败...');
          })
    }
   },
  mounted() {
    this.$ajax.post('banji/list',{}).then(res=>{
      var result=res.data;
      this.bjs=result;
      this.tableVisible=false;
    });
  }
}

</script>
